<template>
	<view class="add-path">
		<view class="path-item">
			<view class="">收件人：</view>
			<input type="text" value="" placeholder="收件人姓名" v-model="pathObj.name"/>
		</view>
		<view class="path-item">
			<view class="">手机号：</view>
			<input type="text" value="" placeholder="11位手机号" v-model="pathObj.phone"/>
		</view>
		<view class="path-item">
			<view class="">所在地址：</view>
			<input type="text" :value="pathObj.city" />
			<view class="" @click="showCityPicker" >请选择 ></view>
			<CityPicker ref="mpvueCityPicker" :pickerValueDefault="pickerValueDefault" @onConfirm="onConfirm"></CityPicker>
		</view>
		<view class="path-item">
			<view class="">详细地址：</view>
			<input type="text" value="" placeholder="5至60个字符" v-model="pathObj.address"/>
		</view>
		<view class="path-item">
			<view class="">设为默认地址</view>
			<radio-group name="" @change="radioChange">
				<label class="radio">
					<radio value="" color="red" :checked="pathObj.isDefault"/><text></text>
				</label>
			</radio-group>
		</view>
	</view>
</template>

<script>
	import mpvueCityPicker from '@/components/uni/mpvue-citypicker/mpvueCityPicker.vue';
	import {mapActions} from "vuex"
	export default {
		components: {
			CityPicker: mpvueCityPicker
		},
		data() {
			return {
				pickerValueDefault: [0, 0, 1],
				pathObj:{
					name:'',
					phone:'',
					city:"",
					address:'',
					isDefault:false
				},
				index:-1,
				// 是否修改状态
				status:false
			}
		},
		onLoad(e) {
			// console.log(e.data);
			if (e.data) {
				uni.setNavigationBarTitle({
					title:'修改地址'
				})
				let result = JSON.parse(e.data);
				// console.log(result);
				this.pathObj = result.item;
				this.index = result.index;
				this.status = true;
			}
		},
		// 页面生命周期
		onNavigationBarButtonTap() {
			// 修改
			if (this.status) {
				// console.log(this.pathObj);
				this.modifyPathFn({
					index:this.index,
					item:this.pathObj
				});
				uni.navigateBack({
					// 返回的页面数，如果 delta 大于现有页面数，则返回到首页。
					delta:1
				})
			}else{
				// 新增
				this.createPathFn(this.pathObj);
				uni.navigateBack({
					// 返回的页面数，如果 delta 大于现有页面数，则返回到首页。
					delta:1
				})
			}
		},
		methods: {
			// 调用citypicker组件
			showCityPicker() {
				this.$refs.mpvueCityPicker.show();
			},
			// citypicker 组件点击确定时回调，返回选中的返回 label , value 以及 code 的值
			onConfirm(e) {
				// console.log(e);
				this.pathObj.city = e.label;
			},
			// 派发新增地址actions
			...mapActions(['createPathFn','modifyPathFn']),
			radioChange(){
				this.pathObj.isDefault = !this.pathObj.isDefault;
			}
		}
	}
</script>

<style scoped>
	.add-path {
		padding: 0 20rpx;
	}

	.path-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16rpx 0;
		width: 100%;
		border-bottom: 2rpx solid #cccccc;
	}

	.path-item input {
		flex: 1;
		text-align: left;
		padding: 10rpx;
	}
</style>
